<!-- My Bots -->
<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill">
      <div v-loading="loading">
        <div class="title"
           style="display:flex;justify-content:space-between;width:30vw">
        <div style="height:32px;line-height:32px;font-size:16px">{{$t('custom.cache.clearText')}}</div>
        <el-button size="small"
                   type="primary"
                   @click="clearAll">{{$t('custom.cache.clearAll')}}</el-button>
      </div>
      <el-divider></el-divider>
      <div v-for="(item,index) in clearList" style="width:30vw;margin-bottom:15px"
           :key="index">
        <div class="title"
             style="display:flex;justify-content:space-between">
          <div style="height:32px;line-height:32px">{{item.name}}</div>
          <el-button size="small"
                     type="primary"
                     @click="clear(item.type)">{{$t('custom.cache.clear')}}</el-button>
        </div>
      </div>
      </div>
      <el-dialog
        title="Result"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="30%">
        <el-alert show-icon v-for="item in result" :key="item.config" :closable="false" style="margin-bottom:10px;"
          :type="item.data.code === 0 ? 'success': 'error'"><span style="font-size:14px">clear {{item.config.url.split('/')[item.config.url.split('/').length-1]}} cache {{item.data.code === 0 ? 'success': 'error'}}</span>
        </el-alert>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="dialogVisible = false">Ok</el-button>
        </span>
      </el-dialog>
  </el-card>
</template>
<script>

export default {
  data () {
    return {
      loading: false,
      dialogVisible: false,
      clearList: [
        { name: 'Clear widget list cache for all tencant', type: 'widget' },
        { name: 'Clear dataset list cache for all tencant', type: 'dataset' },
        { name: 'Clear dashboard list cache for all tencant', type: 'dashboard' },
        { name: 'Clear bot list cache for all tencant', type: 'bot' }
      ],
      result: []
    }
  },
  computed: {},
  created () {
  },
  methods: {
    clearAll () {
      var p1 = this.$interface.reports.clearReportCacheApi({ type: this.clearList[0].type })
      var p2 = this.$interface.reports.clearReportCacheApi({ type: this.clearList[1].type })
      var p3 = this.$interface.reports.clearReportCacheApi({ type: this.clearList[2].type })
      var p4 = this.$interface.bots.clearBotsCacheApi({ type: this.clearList[3].type })
      this.loading = true
      Promise.all([p1, p2, p3, p4]).then((result) => {
        this.result = result
        this.loading = false
        this.dialogVisible = true
      }).catch(() => {
        this.$alert('Server Error', {
          type: 'error'
        })
        this.loading = false
      })
    },
    clear (type) {
      if (type === 'bot') {
        this.clearBotsCache(type)
      } else {
        this.clearReportsCache(type)
      }
    },
    clearReportsCache (type) {
      this.loading = true
      const params = {
        type: type
      }
      this.$interface.reports.clearReportCacheApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$alert('Clear Cache Error', {
              type: 'error'
            })
          }
          if (res.code === 0) {
            this.$alert('Clear Cache Success', {
              type: 'success'
            })
          }
          this.loading = false
        })
        .catch(() => {
          this.$alert('Server Error', {
            type: 'error'
          })
          this.loading = false
        })
    },
    clearBotsCache (type) {
      this.loading = true
      const params = {
        type: type
      }
      this.$interface.reports.clearReportCacheApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$alert('Clear Cache Error', {
              type: 'error'
            })
          }
          if (res.code === 0) {
            this.$alert('Clear Cache Success', {
              type: 'success'
            })
          }
          this.loading = false
        })
        .catch(() => {
          this.$alert('Server Error', {
            type: 'error'
          })
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
</style>
